<template>
  <div class="layout page-logger">
    <Row>
      <Col span="6">&nbsp;</Col>
      <Col span="18" class="right">
      <Form inline>
        <FormItem style="margin-bottom:0;width:200px;">
          <Tooltip :content="$t('page.app.logger.form.keyword')">
            <Input v-model="filter.keyword" search clearable />
          </Tooltip>
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Tooltip :content="$t('page.app.logger.form.before')">
            <InputNumber :max="20" :min="0" v-model="filter.before"></InputNumber>
          </Tooltip>
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Tooltip :content="$t('page.app.logger.form.after')">
            <InputNumber :max="20" :min="0" v-model="filter.after"></InputNumber>
          </Tooltip>
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Tooltip :content="$t('page.app.logger.form.maxline')">
            <InputNumber :max="100" :min="1" v-model="filter.maxline"></InputNumber>
          </Tooltip>
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Button type="primary" @click="searchLogger">{{$t('button.search')}}</Button>
        </FormItem>
      </Form>
      </Col>
    </Row>
    <Divider />
    <Table :columns="columns" :data="logger.list" border :loading="logger.loading">
      <template slot-scope="{ row }" slot="addr">
        {{row.host}}:{{row.port}}
      </template>
      <template slot-scope="{ row }" slot="result">
        <p v-for="(line,i) in row.results" :key="i">{{line}}</p>
      </template>
    </Table>
  </div>
</template>
<script>
  import { log } from '@antv/g2plot/lib/utils'
  export default {
    data() {
      return {
        filter: {
          keyword: '',
          before: 0,
          after: 0,
          maxline: 50,
        },
        columns: [
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.logger.tb.app')) }, key: 'name', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.logger.tb.addr')) }, slot: 'addr', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.logger.tb.result')) }, slot: 'result' },
        ],
        logger: {
          searchId: '',
          list: [],
          loading: false,
        },
      }
    },
    methods: {
      searchLogger() {
        let filter = this.filter
        if (!filter.keyword || filter.keyword.length < 5) return
        filter.before = filter.before || 0
        filter.after = filter.after || 0
        filter.maxline = filter.maxline || 0
        this.logger.loading = true
        this.$md.dispatch('app_logger_search', {
          data: filter
        }).then(data => {
          if (data.retCode === 1) {
            this.logger.searchId = data.data
            setTimeout(() => {
              this.listSearchResult()
            }, 5000)
          } else {
            this.logger.loading = false
          }
        })
      },
      listSearchResult() {
        this.$md.dispatch('app_logger_search_result', {
          data: this.logger.searchId
        }).then(data => {
          if (data.retCode === 1) {
            let lists = data.data || []
            let filters = []
            let logs
            for (let i in lists) {
              logs = lists[i]
              if (logs.results && logs.results.length > 0) filters.push(logs)
            }
            let l1time, l2time
            filters.sort((l1, l2) => {
              // 第一个元素的时间对比
              l1time = l1.results[0].substr(0, 23)
              l2time = l2.results[0].substr(0, 23)
              return l1time.localeCompare(l2time)
            })
            this.logger.list = filters
          }
          this.logger.loading = false
        })
      }
    }
  }
</script>
<style scoped>
</style>
